<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>go-admin-auth</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="../AdminLTE-3.0.5/plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../AdminLTE-3.0.5/dist/css/adminlte.min.css">
    <link rel="stylesheet" href="../static/css/optimization.css">
    <style type="text/css">
        .operations {
            display: block;
        }

        .operations li {
            display: inline-block;
            padding-right: 35px;
        }

        .form-check {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        !important
        }
    </style>
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a href="/themes/default/admin/index.html" class="nav-link">主页</a>
            </li>
        </ul>

        <!-- SEARCH FORM -->
        <!-- <form class="form-inline ml-3">
          <div class="input-group input-group-sm">
            <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
            <div class="input-group-append">
              <button class="btn btn-navbar" type="submit">
                <i class="fas fa-search"></i>
              </button>
            </div>
          </div>
        </form> -->

        <!-- Right navbar links -->
        <ul class="navbar-nav ml-auto">
            <!-- Messages Dropdown Menu -->

            <!-- Notifications Dropdown Menu -->
            <li class="nav-item">
                    <a href="/admin-api/v1/token" class="dropdown-item dropdown-footer"
                       onclick="logout(this);"
                       >退出登录</a>
            </li>
        </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <a href="#" class="brand-link">
            <img src="../AdminLTE-3.0.5/dist/img/AdminLTELogo.png"
                 alt="AdminLTE Logo"
                 class="brand-image img-circle elevation-3"
                 style="opacity: .8">
            <span class="brand-text font-weight-light">go-admin-auth</span>
        </a>

        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar user (optional) -->

            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                    data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->

                    <li class="nav-header" id="sidebar-menu"></li>

                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>后台资源管理</h1>
                    </div>
                    <div class="col-sm-6">

                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>
        <section class="content">

        </section>
        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <!--<h3 class="card-title">Fixed Header Table</h3>-->
                            <section class="content" style="font-size: 0.5rem;">
                                <form class="form-horizontal" action="#">
                                    <div class="row">
                                        <div class="form-group col-4">
                                            <div class="row">
                                                <label class="col-sm-3 col-form-label">角色名</label>
                                                <div class="col-sm-9">
                                                    <input id="role-name" type="text" class="form-control"
                                                           placeholder=""
                                                           readonly="readonly">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group col-3">
                                            <select name="system_id" id="system_id"
                                                    class="form-control auto-complete select-system"
                                                    data-dft=""
                                                    data-dft-option="&lt;option value=&#x27;0&#x27;&gt;全部&lt;/option&gt;"
                                                    data-url="/admin-api/v1/subsystem"
                                                    data-name="name" data-value="id">
                                            </select>
                                        </div>
                                    </div>
                                </form>
                            </section>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body table-responsive p-0">
                            <form class="ajaxFormAdd" id="role-menu-submit" method="POST"
                                  action="/admin-api/v1/role_menu_perm">
                                <input id="perm_role_id" name="role_id" value="" type="hidden">
                                <input id="perm_system_id" name="system_id" value="" type="hidden">
                                <nav class="mt-2">
                                    <ul class="nav nav-pills nav-sidebar flex-column" id="menu_opera_container"
                                        style="margin-bottom: 20px; padding-left: 20px;">

                                        <!--                                    <li class="nav-header" id="sidebar-menu-x">角色授权</li>-->
                                        <!--                                    <li class="nav-item has-treeview menu-open">-->
                                        <!--                                        <a href="/" class="nav-link"><p> 系统管理-->
                                        <!--                                        </p></a>-->
                                        <!--                                        <ul class="nav nav-treeview">-->
                                        <!--                                            <li class="nav-item has-treeview menu-open">-->
                                        <!--                                                <div class="form-check">-->
                                        <!--                                                    <input class="form-check-input" type="checkbox">-->
                                        <!--                                                    <label class="form-check-label">子系统管理</label>-->
                                        <!--                                                </div>-->
                                        <!--                                                <ul class="nav nav-treeview">-->
                                        <!--                                                    <li class="nav-item">-->
                                        <!--                                                        <a href="#" class="nav-link"><p> 子子系统管理 </p></a>-->
                                        <!--                                                        <ul class="operations">-->
                                        <!--                                                            <li>-->
                                        <!--                                                                <input class="form-check-input" type="checkbox">-->
                                        <!--                                                                <label class="form-check-label">Checkbox</label>-->
                                        <!--                                                            </li>-->
                                        <!--                                                            <li>-->
                                        <!--                                                                <input class="form-check-input" type="checkbox">-->
                                        <!--                                                                <label class="form-check-label">Checkbox</label>-->
                                        <!--                                                            </li>-->
                                        <!--                                                        </ul>-->
                                        <!--                                                    </li>-->
                                        <!--                                                </ul>-->
                                        <!--                                            </li>-->
                                        <!--                                        </ul>-->
                                        <!--                                    </li>-->
                                    </ul>
                                    <button type="submit" class="btn btn-sm btn-success perm-submit">保存</button>
                                </nav>
                            </form>
                        </div>


                        <!-- /.card-body -->
                        <div class="card-footer clearfix">

                        </div>
                    </div>
                    <!-- /.card -->
                </div>
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->


    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="../AdminLTE-3.0.5/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../AdminLTE-3.0.5/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="../AdminLTE-3.0.5/dist/js/adminlte.min.js"></script>

<script src="../static/plugins/jquery.form.js"></script>
<script src="../static/plugins/jquery-tmpl/jquery.tmpl.js"></script>
<link rel="stylesheet" href="../static/plugins/pagination/dist/pagination.css">
<script src="../static/plugins/pagination/dist/pagination.js"></script>

<script id="sidebar-level-1" type="text/x-jquery-tmpl">
  {{if $data.child}}
  <li class="nav-item has-treeview">
    <a href="${uri}" class="nav-link">
      <i class="nav-icon fas fa-tree"></i>
      <p>
        ${name}
        <i class="right fas fa-angle-left"></i>
      </p>
    </a>
    <ul class="nav nav-treeview">
      {{tmpl($data.child) '#sidebar-level-1'}}
    </ul>
  </li>
  {{else}}
  <li class="nav-item">
    <a href="${theme_uri}" class="nav-link">
      <i class="nav-icon far fa-circle"></i>
      <p>
        ${name}
      </p>
    </a>
  </li>
  {{/if}}




</script>
<script id="operations" type="text/x-jquery-tmpl">
<li>
    <input name="opera_list[]" value="${menu_id}_${id}" class="form-check-input" type="checkbox">
    <label class="form-check-label"><i>${name}</i></label>
</li>


</script>

<script id="menu_operation_tree" type="text/x-jquery-tmpl">
  {{if $data.child}}
  <li class="nav-item has-treeview menu-open">
    <div class="form-check">
        <input name="menu_id_list[]" data-id="menu_${id}" value="${id}" class="form-check-input parent-checkbox" type="checkbox">
        <label class="form-check-label h6">${name}</label>
    </div>
    <ul class="nav nav-treeview">
      {{tmpl($data.child) '#menu_operation_tree'}}
    </ul>
  </li>
  {{else}}
  <li class="nav-item">
        <div class="form-check">
            <input name="menu_id_list[]" data-id="menu_${id}" value="${id}" class="form-check-input parent-checkbox" type="checkbox">
            <label class="form-check-label h6">${name}</label>
        </div>
        <ul class="operations">
            {{tmpl($data.operation_list) '#operations'}}
        </ul>
    </li>
  {{/if}}




</script>

<link rel="stylesheet" href="../static/plugins/jquery-toast-plugin-1.3.2/dist/jquery.toast.min.css">
<script src="../static/plugins/jquery-toast-plugin-1.3.2/dist/jquery.toast.min.js"></script>
<script src="../static/js/admin.common.js"></script>

<script>
    window.sideBarPath = "/themes/default/role/list.html"

    function initRoleInfo() {
        $.ajax({
            url: "/admin-api/v1/role/" + getSearchId("id"),
            data: {},
            success: function (res) {
                $("#role-name").val(res.data.name)
                $("#perm_role_id").val(res.data.id)
            }
        })
    }

    function initMenuOperation(systemId) {
        $.ajax({
            url: "/admin-api/v1/menu_operation_perm",
            type: "GET",
            data: {
                "system_id": systemId,
            },
            success: function (res) {
                console.log(res)
                $('#menu_opera_container').html("")
                $('#menu_operation_tree').tmpl(res.data.child).appendTo('#menu_opera_container');

                // 渲染
                initRoleMenuOpera(systemId, getSearchId("id"))
            }
        })
    }

    function initRoleMenuOpera(systemId, roleId) {
        $.ajax({
            url: "/admin-api/v1/role_menu_perm/0",
            type: "GET",
            data: {
                "system_id": systemId,
                "role_id": roleId,
            },
            success: function (res) {
                // 菜单
                $("input[name='menu_id_list[]']").each(function (i) {
                    // 此this 代表一个元素
                    if (res.data.menu_id_list.indexOf(parseInt($(this).val())) > -1) {
                        $(this).attr("checked", "true")
                    }
                })
                // 按钮
                $("input[name='opera_list[]']").each(function (i) {
                    // 此this 代表一个元素
                    if (res.data.menu_opera_combine.indexOf($(this).val()) > -1) {
                        $(this).attr("checked", "true")
                    }
                })
            }
        })
    }

    $(document).ready(function () {
        // 获取本角色
        initRoleInfo()

        $("select.select-system").on("change", function () {
            let systemId = $(this).val()

            $("#perm_system_id").val(systemId)
            if (systemId == 0) {
                return
            }

            // 拉取此系统的所有菜单和操作按钮
            initMenuOperation(systemId)
        })


        // $(".perm-submit").bind("click", function () {
        //     console.log($("#role-menu-submit").serializeObject())
        // })
    })

</script>

</body>
</html>
